<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Cascader from "./Cascader.svelte";
    import { Link, Paragraph, Text } from "../Typography";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";
    import { message } from "../Message";
    import { TreeCheckMod } from "../Tree/Tree.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Cascader",
        component: Cascader,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let value = $state<string[]>([]);
    let value2 = $state<string[]>([]);
    const valueMap: any = {};
    const onBeforeChecked = (item: any, checked: boolean) => {
        if (checked) {
            valueMap[item._parent.value] = item.value;
        } else {
            delete valueMap[item._parent.value];
        }
        queueMicrotask(() => {
            value2 = Object.values(valueMap);
        });
        return true;
    };
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
            },
            {
                value: "jiangsu",
                title: "江苏",
            },
        ]}
        <Cascader {...args} {data} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Space>
            <Cascader {data} size="large" />
            <Cascader {data} />
            <Cascader {data} size="small" />
        </Space>
    {/snippet}
</Story>
<Story name="Seperator">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} seperator=">" />
    {/snippet}
</Story>

<Story name="Trigger">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} trigger="hover" />
    {/snippet}
</Story>

<Story name="ChangeOnSelect" args={{ changeOnSelect: true }}>
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {...args} {data} value={["jiangsu"]} />
    {/snippet}
</Story>

<Story name="Value">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} bind:value />

        <Button
            type="primary"
            onclick={() => {
                value = ["jiangsu", "suzhou", "shizilin"];
            }}>设置值</Button
        >
    {/snippet}
</Story>

<Story name="Empty">
    {#snippet template(args)}
        {@const data = []}
        <Cascader {data} />
    {/snippet}
</Story>

<Story name="Multi">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} multi />
    {/snippet}
</Story>

<Story name="Max">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader
            {data}
            multi
            max={2}
            onexceed={() => {
                message.error("最多只能选择2个");
            }}
        />
    {/snippet}
</Story>

<Story name="HeaderFooter">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data} multi>
            {#snippet header()}
                <div
                    style={`
                        height: 36px;
                        display: flex;
                        padding: 0 16px;
                        align-items: center;
                        border-bottom: 1px solid var(--cui-color-border);
                    `}
                >
                    <Text>选择省份</Text>
                </div>
            {/snippet}
            {#snippet footer()}
                <div
                    style={`
                        height: 36px;
                        display: flex;
                        padding: 0 16px;
                        align-items: center;
                        cursor: pointer;
                        border-top: 1px solid var(--cui-color-border);
                    `}
                >
                    <Text>找不到相关选项？</Text>
                    <Link>去新建</Link>
                </div>
            {/snippet}
        </Cascader>
    {/snippet}
</Story>

<Story name="LongList">
    {#snippet template(args)}
        {@const data = [
            { value: "A", title: "A", children: [{ value: "B", title: "B", children: [{ value: "C", title: "C", children: [{ value: "D", title: "D", children: [{ value: "E", title: "E" }] }] }] }] },
        ]}
        <Cascader {data}></Cascader>
    {/snippet}
</Story>

<Story name="TriggerRender">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data}>
            {#snippet triggerRender(text, values)}
                <Button>{text["title"] || "请选择"}</Button>
            {/snippet}
        </Cascader>
    {/snippet}
</Story>

<Story name="TagRender">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                        children: [
                            {
                                value: "fuzimiao",
                                title: "夫子庙",
                            },
                        ],
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                        children: [
                            {
                                value: "zhuozhengyuan",
                                title: "拙政园",
                                disabled: true,
                            },
                            {
                                value: "shizilin",
                                title: "狮子林",
                            },
                        ],
                    },
                ],
            },
        ]}
        <Cascader {data}>
            {#snippet tagRender(text: any)}
                {#if text && text["title"]}
                    <span>自定义渲染{text["title"]}</span>
                {/if}
            {/snippet}</Cascader
        >
    {/snippet}
</Story>

<Story name="LimitChecked">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                    },
                ],
            },
        ]}
        <Cascader {data} bind:value={value2} multi mode={TreeCheckMod.CHILD} beforeChecked={onBeforeChecked}></Cascader>
    {/snippet}
</Story>

<Story name="Filter">
    {#snippet template(args)}
        {@const data = [
            {
                value: "beijing",
                title: "北京",
                children: [
                    { value: "gugong", title: "故宫" },
                    { value: "tiantan", title: "天坛" },
                    { value: "wangfujing", title: "王府井xxxxxxxxxxx" },
                    { value: "wangfujing2", title: "王府井2", disabled: true },
                    { value: "wangfujing3", title: "王府井3" },
                    { value: "wangfujing4", title: "王府井4" },
                    { value: "wangfujing5", title: "王府井5" },
                    { value: "wangfujing6", title: "王府井6" },
                    { value: "wangfujing7", title: "王府井7" },
                    { value: "wangfujing8", title: "王府井8" },
                    { value: "wangfujing9", title: "王府井9" },
                ],
            },
            {
                value: "jiangsu",
                title: "江苏",
                children: [
                    {
                        value: "nanjing",
                        title: "南京",
                    },
                    {
                        value: "suzhou",
                        title: "苏州",
                    },
                ],
            },
        ]}
        <Cascader {data} mode={TreeCheckMod.CHILD} multi filter></Cascader>
    {/snippet}
</Story>
